<template>
	<view>
		<view class="box-nav">
			<u-tabs :list="list" lineWidth="50;margin-left: 60rpx;" @click="click"
				itemStyle="padding-left: 105rpx; height: 100rpx;font-weight: bold; "></u-tabs>
		</view>
		<view class="box">
			<view v-for="(item,index) in lists  " class="one">
				<view style="margin-left: 50rpx;margin-top: 25rpx; ">
					<text class="num">
						维修编号：{{item.number}}
						<text style="margin-left: 250rpx;">{{item.name}}</text>
					</text>
				</view>
				<view class="content" style="margin-left: 50rpx;margin-top: 15rpx;color: #A1A1A1;">
					<view class="">维修内容：{{item.content}}</view>
					<view class="">维修地址：{{item.address}}</view>
					<view class="">联系电话：{{item.phone}}</view>
					<view class="">预约时间：{{item.time}}</view>
					<view style="display: flex;">
						<view class="">维修时间：{{item.addresstiem}}</view>
						<view style="margin-left: 247rpx;color:#37DE76 ;">{{item.isaddress}}</view>
					</view>
				</view>
			</view>
			<button style="position: absolute;top: 1200rpx;width: 90%;margin-left:32rpx; 
			border-radius: 60rpx;background-color: #5282F0;border: none;color: aliceblue;font-size: 30rpx;">维修预约</button>	
		</view>					
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '已维修',
				}, {
					name: '维修中',
				}, {
					name: '未维修'
				}],
				lists: [],
				listone: [{
					name: '张海宇',
					number: 'ZX000102',
					content: '门窗损坏',
					address: 'A区1单元301',
					phone: '1388886666',
					time: '2022-5-27',
					addresstiem: '2022-5-28',
					isaddress:'已维修'
				}],
				listtwo: [{
					name: '张海宇',
					number: 'ZX000102',
					content: '门窗损坏',
					address: 'A区1单元301',
					phone: '1388886666',
					time: '2022-5-27',
					addresstiem: '2022-5-28',
					isaddress:'维修中'
				}],
				listthree: [{
					name: '张海宇',
					number: 'ZX000102',
					content: '门窗损坏',
					address: 'A区1单元301',
					phone: '1388886666',
					time: '2022-5-27',
					addresstiem: '2022-5-28',
					isaddress:'未维修'
				}]
			}
		},
		created() {
			//显示第一张
			this.lists = this.listthree
		},
		methods: {
			click(e) {
				console.log(e.index);
				this.$nextTick(() => {
					if (e.index == 0) {
						this.lists = this.listone
					}else if(e.index == 1){
						this.lists = this.listtwo
					}else if(e.index == 2){
						this.lists = this.listthree
					}
				})				
			},			
		}
	}
</script>
<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;

	}
	.box {
		background-color: #D3DAEA;
		width: 100%;
		height: 100vh;
	}
	.box-nav {
		font-size: 34rpx;
	}
	.one {
		width: 90%;
		height: 270rpx;
		margin-left: 30rpx;
		font-size: 27rpx;
		background-color: white;
		border-radius: 10px;
		position: absolute;
		top: 140rpx;
	}
</style>
